<script setup>
/**
 * @import libs
 */
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

/**
 * @import components
 */
import GoodsItem from '@/components/shopping/goods-item.vue'

/**
 * @import pinia stores
 */

//pinia -> useShoppingStaticMessStore
import { useShoppingStaticMessStore } from '@/stores/shopping/shoppingStaticMess.js'

/**
 * @param currentGoodsList 当前商品列表
 */
let { currentGoodsList } = storeToRefs(useShoppingStaticMessStore())

/**
 * 标题
 */
const title = ref('猜你喜欢')

</script>

<template>
    <div>
        <div class="title-class">{{ title }}</div>
        <div>
            <scroll-view scroll-y enable-flex class="goods-view-list">
                <goods-item v-for="(item, index) in currentGoodsList" :key="index" :item="item"></goods-item>
            </scroll-view>
        </div>
    </div>
</template>

<style scoped>
.title-class {
    margin-top: 1.5vh;
    color: #cc8124;
    font-size: 25rpx;
    margin-left: 45rpx;
}

.goods-view-list {
    width: 680rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    height: 62vh;
}
</style>